/**
 * 主界面路由组件
 */

import React, {Component} from 'react'
import {Switch, Route, Redirect} from 'react-router-dom'

import {connect} from 'react-redux'
// github上面去查api
// npm install --save js-cookie
import Cookies from 'js-cookie'     // 可以操作前端cookie的对象  set()/get()/remove()

import {NavBar} from 'antd-mobile'


import {getRedirectTo} from '../../utils'
import {getUser} from '../../redux/actions'


import BanWeiInfo from '../banwei-info/banwei-info'
import XueyuanInfo from '../xueyuan-info/xueyuan-info'

import Banwei from '../banwei/banwei'
import Xueyuan from '../xueyuan/xueyuan'
import Message from '../message/message'
import Personal from '../personal/personal'
import NotFound from '../../components/not-found/not-found'

import NavFooter from '../../components/nav-footer/nav-footer'
import Chat from '../chat/chat'



import Register from "../register/register";
import Login from "../login/login";




class Main extends Component{


    // 给组件对象添加属性
    navList = [ // 包含所有导航组件的相关信息数据
    {
      path: '/banwei', // 路由路径
      component: Banwei,
      title: '可挑选用户可挑选',  // 显示顶部的标题
      icon: 'banwei',   // 底部的图表
      text: '学员',
    },
    {
      path: '/xueyuan', // 路由路径
      component: Xueyuan,
      title: '可加入用户列表',
      icon: 'xueyuan',
      text: '进组',
    },
    {
      path: '/message', // 路由路径
      component: Message,
      title: '消息列表',
      icon: 'message',
      text: '消息',
    },
    {
      path: '/personal', // 路由路径
      component: Personal,
      title: '用户中心',
      icon: 'personal',
      text: '个人',
    }
  ]



    /*生命周期函数*/
    componentDidMount() {
        // debugger
        // 登录过(cookie中有userid), 但没有登录(redux管理的user中没有_id)  发送请求获取对应的user
        const userid = Cookies.get('userid')
        console.log(userid)
        const {_id} = this.props.user
        console.log(_id)
        if (userid && !_id) {
            // 发送异步请求,获取user
            // console.log('发送ajax请求获取user')
            this.props.getUser()
        }
    }

    /* render里面是不能发送请求的 */
    render() {
        // 检查用户是否登录, 如果没有,则自动重定向到登录界面
       /* const {user} = this.props

        if (!user._id) {  // 没有user   说明没有登录   从状态管理器中获取user
            return <Redirect to='/login' />
        }*/
       // debugger
        // 读取cookie中的userid
        const userid = Cookies.get('userid')

        // 如果没有, 则自动重定向到登录界面
        if (!userid) {
            return <Redirect to='/login' />
        }
        // 如果有,则读取redux中的user
        const {user, unReadCount} = this.props
        // 如果user里面没有_id,只有cookie里面的userid,redux里面没有user的状态
        // 返回一个null, 对应的信息还在后台
        if (!user._id) {
            return null;
        } else {
            // 如果user里面有_id,则显示对应的界面
            // 据user的type和header来计算出一个重定向的路由路径,自动重定向
            let path = this.props.location.pathname
            console.log('-----------------')
            console.log(this.props)
            console.log(path)
            console.log('-----------------')
            if (path === '/') {
                path = getRedirectTo(user.type, user.header)
                return <Redirect to={path}/>
            }
        }

        const {navList} = this
        /* 获取当前请求的路径名字 */
        const path = this.props.location.pathname
        // 得到当前的nav, 也可能没有
        const currentNav = navList.find(nav => nav.path === path)

        if (currentNav) {
            // 决定哪个路由需要隐藏
            if (user.type === 'banwei') {
                // 隐藏 数组  的第二个    -- xueyuan
                navList[1].hide = true
            } else {
                // 隐藏 数组  的第一个    -- banwei
                navList[0].hide = true
            }
        }

        return (
            <div>
                {/*顶部标题*/}
                {currentNav ?  <NavBar mode="dark" className='sticky-header'>{currentNav.title}</NavBar> : null}
                <NavBar></NavBar>
                {/*根据列表 映射四个路由组件 */}
                <Switch>
                    {
                        navList.map(nav => <Route path={nav.path} component={nav.component}></Route>)

                    }
                    <Route path='/banweiinfo' component={BanWeiInfo}></Route>
                    <Route path='/xueyuaninfo' component={XueyuanInfo}></Route>
                    <Route path='/chat/:userid' component={Chat}></Route>
                    <Route component={NotFound}/>
                </Switch>
                {/*底部导航*/}
                {currentNav ?  <NavFooter navList={navList} unReadCount={unReadCount} /> : null}
            </div>
        )
    }
}


export default connect(
    // state 去接收用户信息
    state => ({user: state.user, unReadCount: state.chat.unReadCount}),
    // 把getUser 传到这个ui组件
    {getUser}
)(Main)

/*
* 1. 实现自动登录
*   componentDidMount
*    1.1) 如果cookie中有userid,(登录过,但是当前未登录) (redux中管理的user中没有_id)
*       那么就需要自动登录, 要发送请求获取对应的user
*           并且需要把user管理起来
*           暂时不做任何显示,有了user以后做展现
*   render()
*    1.2) 如果cookie中没有userid,那么就自动进入login页面
*
*    1.3) 判断redux管理的user中是否有_id, 如果没有,暂时不做任何显示
*
*    1.4) 如果有了,说明当前已经登录,需要显示对应的界面
*
* 2. 如果已经登录了,如果请求根路径,
*    根据user的type和header来计算出一个重定向的路由路径,自动重定向
*
*
* */